<template>
  <div class="small-tools">
    <div class="tools-title">
      <img src="@/assets/logo2.png" alt="">
    </div>
    <div class="tools-list">
      <div class="tools-item" @click="toCourse">
        <img src="@/assets/icons/ai.png" alt="">
        <p>AI课程</p>
      </div>
      <div class="tools-item" @click.stop="toSaishi">
        <img src="@/assets/icons/saishi.png" alt="">
        <p>专业赛事</p>
      </div>
    </div>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
export default {
  name: "SmallTools",
  data() {
    return {};
  },
  methods: {
    toCourse() {
      const userinfo = JSON.parse(localStorage.getItem('userinfo')) || {};
      const token = userinfo.token;
      if (!token) {
        this.$message.error('请先登录');
        setTimeout(() => {
          this.$router.push('/login');
        },300)
      } else {
        this.$router.push({
          path: './courseCenter'
        });
      }
    },
    toSaishi(e) {
      this.$warning({
        content: '敬请期待',
      });
    }
  },
};
</script>
<style lang="less" scoped>
.small-tools {
    position: fixed;
    left: 40px;
    top: 50%;
    .tools-title{
      width: 195px;
      height: 85px;
      background: url('../assets/aibg.png') no-repeat center;
      background-size: 100% 100%;
      img{
        width: 114px;
        height: 20px;
        margin: 20px auto;
      }
    }
    .tools-list{
      margin-top: -30px;
      width: 195px;
      // height: 82px;
      background: linear-gradient( 180deg, #DFF1FF 0%, #FFFFFF 100%);
      box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.1);
      border-radius: 13px;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
      .tools-item{
        display: flex;
        // align-items: center;
        // justify-content: center;
        padding-top: 20px;
        margin-left: 15px;
        cursor: pointer;
        img{
          width: 18px;
          height: 18px;
          margin-right: 10px;
        }
        p{
          font-weight: 400;
          font-size: 15px;
          color: #000000;
        }
      }
    }
}
</style>